<template>
  <div>
    <el-table :data="wellList"
              size="mini" border fit highlight-current-row style="width: 100%"
              :row-class-name="tableRowClassName"
              @cell-dblclick="handleCellDbClick">

      <el-table-column label="井号" prop="code" align="center" width="200px" fixed show-overflow-tooltip/>
      <el-table-column label="油气藏类型"  prop="reservoir" align="center" width="150px" show-overflow-tooltip/>
      <el-table-column label="井别" prop="wellKind" align="center" width="150px" show-overflow-tooltip/>
      <el-table-column label="井型" prop="wellType" align="center" width="150px" show-overflow-tooltip/>
      <el-table-column label="开钻日期" prop="spudInDate" align="center" width="190px">
        <template slot="header">
          开钻日期
          <span class="edit-able">
                <i class="el-icon-edit" title="此列可双击编辑"/>
              </span>
        </template>
        <template slot-scope="scope">
          <el-date-picker
              v-if="rowIndex == scope.$index && colIndex == scope.column.id"
              ref="dateTimePicker"
              :id="scope.$index + scope.column.id"
              v-model="scope.row.spudInDate"
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
              :editable="false"
              :clearable="false"
              size="mini"
              placeholder="选择日期"
              style="width: 100%"
              @blur="onInputTableBlur(scope.row,scope.column,scope.row.spudInDate)"
          />
          <span v-else>{{ scope.row.spudInDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="末开钻日期" prop="lastSpudInDate" align="center" width="190px">
        <template slot="header">
          末开钻日期
          <span class="edit-able">
            <i class="el-icon-edit" title="此列可双击编辑"/>
          </span>
        </template>
        <template slot-scope="scope">
          <el-date-picker
              v-if="rowIndex == scope.$index && colIndex == scope.column.id"
              ref="dateTimePicker"
              v-model="scope.row.lastSpudInDate"
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
              :editable="false"
              :clearable="true"
              size="mini"
              placeholder="选择日期"
              style="width: 100%"
              @blur="onInputTableBlur(scope.row,scope.column,scope.row.lastSpudInDate)"
          />
          <span v-else>{{ scope.row.lastSpudInDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="目的层" prop="designHorizon" align="center" width="190px" show-overflow-tooltip>
        <template slot="header">
          目的层
          <span class="edit-able">
                <i class="el-icon-edit" title="此列可双击编辑"/>
              </span>
        </template>
        <template slot-scope="scope">
          <el-input
              v-if="rowIndex == scope.$index && colIndex == scope.column.id"
              ref="inputRef"
              v-model.trim="scope.row.designHorizon"
              size="mini"
              maxlength="20"
              @blur="onInputTableBlur(scope.row,scope.column,scope.row.designHorizon)"
          />
          <span v-else>{{ scope.row.designHorizon }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设计井深" prop="designWellDepth" align="center" width="150px">
        <template slot="header">
          设计井深
          <span class="edit-able">
                <i class="el-icon-edit" title="此列可双击编辑"/>
              </span>
        </template>
        <template slot-scope="scope">
          <el-input
              v-if="rowIndex == scope.$index && colIndex == scope.column.id"
              ref="inputRef"
              v-model="scope.row.designWellDepth"
              v-limitPositive="{ num: 2, isForce: false }"
              size="mini"
              @blur="onInputTableBlur(scope.row,scope.column,scope.row.designWellDepth)"
          />
          <span v-else>{{ scope.row.designWellDepth }}</span>
        </template>
      </el-table-column>
      <el-table-column label="完钻井深" prop="completeDrillDepth" align="center" width="150px">
        <template slot="header">
          完钻井深
          <span class="edit-able">
                <i class="el-icon-edit" title="此列可双击编辑"/>
              </span>
        </template>
        <template slot-scope="scope">
          <el-input
              v-if="rowIndex == scope.$index && colIndex == scope.column.id"
              ref="inputRef"
              v-model="scope.row.completeDrillDepth"
              v-limitPositive="{ num: 2, isForce: false }"
              size="mini"
              @blur="onInputTableBlur(scope.row,scope.column,scope.row.completeDrillDepth)"
          />
          <span v-else>{{ scope.row.completeDrillDepth }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设计水平段长" prop="designSegment" align="center" width="150px">
        <template slot="header">
          设计水平段长
          <span class="edit-able">
                <i class="el-icon-edit" title="此列可双击编辑"/>
              </span>
        </template>
        <template slot-scope="scope">
          <el-input
              v-if="rowIndex == scope.$index && colIndex == scope.column.id"
              ref="inputRef"
              v-model="scope.row.designSegment"
              v-limitPositive="{ num: 2, isForce: false }"
              size="mini"
              @blur="onInputTableBlur(scope.row,scope.column,scope.row.designSegment)"
          />
          <span v-else>{{ scope.row.designSegment }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实际水平段长" prop="actualSegment" align="center" width="150px">
        <template slot="header">
          实际水平段长
          <span class="edit-able">
                <i class="el-icon-edit" title="此列可双击编辑"/>
              </span>
        </template>
        <template slot-scope="scope">
          <el-input
              v-if="rowIndex == scope.$index && colIndex == scope.column.id"
              ref="inputRef"
              v-model="scope.row.actualSegment"
              v-limitPositive="{ num: 2, isForce: false }"
              size="mini"
              @blur="onInputTableBlur(scope.row,scope.column,scope.row.actualSegment)"
          />
          <span v-else>{{ scope.row.actualSegment }}</span>
        </template>
      </el-table-column>
      <el-table-column label="导向单位" prop="steerUnit" align="center" min-width="200px" show-overflow-tooltip>
        <template slot="header">
          导向单位
          <span class="edit-able">
                <i class="el-icon-edit" title="此列可双击编辑"/>
              </span>
        </template>
        <template slot-scope="scope">
          <el-input
              v-if="rowIndex == scope.$index && colIndex == scope.column.id"
              ref="inputRef"
              v-model.trim="scope.row.steerUnit"
              type="textarea"
              size="mini"
              maxlength="50"
              :autosize="{ minRows: 1, maxRows: 4 }"
              resize="none"
              @blur="onInputTableBlur(scope.row,scope.column,scope.row.steerUnit)"
          />
          <span v-else>{{ scope.row.steerUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="物探跟踪" prop="geophysicalTrace" align="center" min-width="300px" show-overflow-tooltip>
        <template slot="header">
          物探跟踪
          <span class="edit-able">
                <i class="el-icon-edit" title="此列可双击编辑"/>
              </span>
        </template>
        <template slot-scope="scope">
          <el-input
              v-if="rowIndex == scope.$index && colIndex == scope.column.id"
              ref="inputRef"
              v-model.trim="scope.row.geophysicalTrace"
              type="textarea"
              size="mini"
              maxlength="500"
              :autosize="{ minRows: 1, maxRows: 4 }"
              resize="none"
              @blur="onInputTableBlur(scope.row,scope.column,scope.row.geophysicalTrace)"
          />
          <span v-else>{{ scope.row.geophysicalTrace }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" align="center" min-width="300px" show-overflow-tooltip>
        <template slot="header">
          备注
          <span class="edit-able">
                <i class="el-icon-edit" title="此列可双击编辑"/>
              </span>
        </template>
        <template slot-scope="scope">
          <el-input
              v-if="rowIndex == scope.$index && colIndex == scope.column.id"
              ref="inputRef"
              v-model.trim="scope.row.remark"
              type="textarea"
              size="mini"
              maxlength="2000"
              :autosize="{ minRows: 1, maxRows: 4 }"
              resize="none"
              @blur="onInputTableBlur(scope.row,scope.column,scope.row.remark)"
          />
          <span v-else>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
    </el-table>


  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Tooltip',
  directives: {
    limitPositive: {
      update(el, binding, vnode) {
        console.log(el, binding, vnode)
        // const p = el.children[0]
        // if (p.scrollWidth > p.offsetWidth) return
        // const span = el.children[1]
        // el.removeChild(span)
      }
    }
  },
  data() {
    return {
      isFormOpened: 0,
      wellList: [
        {
          code: '五宝浅20',
          reservoir: '常规气',
          wellKind: '探井',
          wellType: '水平井',
          spudInDate: '2023-08-14 06:00',
          lastSpudInDate: '2023-08-14 06:00',
          completeDrillDate: '2023-08-14 06:00',
          designHorizon: '雷口坡组',
          designWellDepth: '5000.25',
          completeDrillDepth: '5000.25',
          designSegment: '2000.55',
          actualSegment: '2500.55',
          drillingRate: null,
          horizonSegmentDrillDay: '30',
          steerUnit: '蓝海智信能源技术有限公司',
          geophysicalTrace: '发生大幅杀跌发宋都股份非斯蒂芬斯蒂芬岁的个非斯蒂芬斯蒂芬岁的',
          remark: null
        },
        {
          code: '五宝浅201',
          reservoir: '常规气',
          wellKind: '探井',
          wellType: '水平井',
          spudInDate: '2023-08-14 06:00',
          lastSpudInDate: '2023-08-14 06:00',
          completeDrillDate: '2023-08-14 06:00',
          designHorizon: '雷口坡组',
          designWellDepth: '5000.25',
          completeDrillDepth: '5000.25',
          designSegment: '2000.55',
          actualSegment: '2500.55',
          drillingRate: null,
          horizonSegmentDrillDay: '30',
          steerUnit: '蓝海智信能源技术有限公司',
          geophysicalTrace: '发生大幅杀跌发宋都股份非斯蒂芬斯蒂芬岁的个非斯蒂芬斯蒂芬岁的',
          remark: null
        }
      ],
      rowIndex: undefined, // 表格行
      colIndex: undefined, // 表格列
      beforeEditValue: undefined,
    }
  },
  mounted(){

  },
  methods: {
    //触发方法
    openUpdateForm(i) {
      this.isFormOpened = i
      this.$nextTick(() => {
        this.$refs.inputRef.focus()
      })
    },
    updateLib() {
      console.log("updateLib")
    },

    // 双击单元格，并聚焦
    handleCellDbClick(row, column, cell, event) {
      console.log("11",row, column, cell, event)
      // 找到单个格子独有的属性 - 这里是用所在行跟列id区别显示
      this.rowIndex = row.index
      this.colIndex = column.id
      this.beforeEditValue = row[column.property]


      // 获取input框焦点 - 为了能进行行列清空操作（不然无法精准定位）
      this.$nextTick(() => {
        if (this.$refs.dateTimePicker != null) {
          let dom = document.getElementById(row.index + column.id)
          dom?.focus()
        } else if (this.$refs.inputRef != null) {
          console.log("refs", this.$refs.inputRef)
          this.$refs.inputRef.focus()
        }

      })
    },

    // 取消焦点 选中行列清空
    onInputTableBlur(row, column, data) {
      // console.log("data", row, column, data)
      if (data == null || data === '') {
        return
      }
      this.rowIndex = undefined
      this.colIndex = undefined
      this.beforeEditValue = undefined
    },
    // 给行数据加索引
    tableRowClassName({row, rowIndex}) {
      row.index = rowIndex
    },
  },
}
</script>
<style>
.base-tooltip {
  display: flex;
  align-items: center;

  > p {
    width: calc(100% - 30px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 10px 0 0;
  }
}
</style>

